<template>
  <div class="box">
    <el-row>
      <el-col :span="16">
        <el-input v-model="number" placeholder="房号" style="width: 200px;" />
        <el-button type="warning" @click="getData">查询</el-button>
      </el-col>
      <el-col :span="8">
        <el-button @click="shangHandler">批量上架</el-button>
        <el-button @click="xiaHandler">批量下架</el-button>
        <el-button @click="showDialog">批量删除</el-button>
        <el-button type="primary" @click="addBtnHandler">新增房型</el-button>
      </el-col>
    </el-row>
    <querenDialog v-model="dialogVisibled" :dialogVisibled="dialogVisibled" @delAllHandler="delsHandler"
      @dialogCancelHandler="dialogHandler"></querenDialog>
    <MyDialog v-model="dialogVisible" :dialogVisible="dialogVisible" :nowid="nowid" @dialogCancel="dialogCancelHandler"
      @dialogOk="dialogOKHandler" />
    <el-table :data="tableData" style="width: 100%" height="340" @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#C9DAFF' }" :row-style="{ height: '60px' }">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="r_name" label="房型名称" width="180" />
      <el-table-column prop="number" label="房号" width="180" />
      <el-table-column prop="bz" label="备注" />
      <el-table-column prop="sjxj" label="上架/下架">
        <template #default="scope">
          <el-tag class="mx-1" v-show="scope.row.sjxj == '已下架'" effect="dark" type="danger"
            @click="sjHandler(scope.row.number)">已下架</el-tag>
          <el-tag class="mx-1" v-show="scope.row.sjxj == '上架中'" @click="xjHandler(scope.row.number)">上架中</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="slotScope">
          <a href="javascript:void(0)" style="color: #F08F2E;" @click="updataHandler(slotScope.row.number)">编辑</a>
          <el-popconfirm title="您确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消"
            @confirm="delHandler(slotScope.row.number)">
            <template #reference>
              <a href="javascript:void(0)" style="margin-left: 10px;color: #F08F2E;">删除</a>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next, jumper,sizes" :page-sizes="[5, 10, 20, 30]"
      @update:page-size='pagesize = $event' :page-size="pagesize" :current-page="page"
      @update:current-page="page = $event" :total="total" class="mt-4">
    </el-pagination>
    <div class="pageleft">
      共{{ total }}条记录 第{{ page }}/{{ Math.ceil(total / pagesize) }}页
    </div>
  </div>
</template>
  
<script>
import { getRoomsApi, delRoomApi, addRoomApi, putRoomApi, removeRoomApi, patchRoomApi } from '../../api/roomApi'
import MyDialog from '../../components/MyDialog.vue'
import querenDialog from '../../components/querenDialog.vue'
import { ElMessage } from 'element-plus'
export default {
  components: {
    MyDialog, querenDialog
  },
  created() {
    this.getData()
  },
  data() {
    return {
      number: '',
      tableData: [  //房型名称 r_name  房号 number 备注 bz 上下架 sjxj 
        // { r_name: '途选大床房', number: 1004, bz: 5, sjxj: false },
        // { r_name: '途享大床房', number: 1005, bz: 5, sjxj: false },
        // { r_name: '途奢大床房', number: 1006, bz: 5, sjxj: false },
        // { r_name: '途奢双床房', number: 1007, bz: 5, sjxj: true },
      ],
      tableDataed: [],
      nowid: 0,
      checked: [],
      dialogVisible: false,
      dialogVisibled: false,
      page: 1,
      pagesize: 5,
      total: 0
    }
  },
  methods: {
    async delHandler(nb) {
      let numArr = []
      numArr.push(nb)
      let res = await delRoomApi(numArr)
      if (res.ok == 1) {
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
      } else {
        ElMessage({
          type: 'error',
          message: '删除失败'
        })
      }
      this.getData()
    },
    async getData() {
      let ret = await getRoomsApi(this.page, this.pagesize, this.number)
      this.tableData = ret.results.map(item => (
        {
          ...item,
          sjxj: item.sjxj == 'true' ? '上架中' : '已下架'
        }))
      this.total = ret.total
      this.tableDataed = [...this.tableData]
    },
    handleSelectionChange(data) {
      this.checked = []
      data.forEach(item => this.checked.push(item.number))
    },
    showDialog() {
      this.dialogVisibled = true
    },
    dialogHandler() {
      this.dialogVisibled = false;
    },
    async delsHandler() {
      let numArr = []
      this.checked.forEach(item => numArr.push(item))
      let res = await removeRoomApi(numArr)
      if (res.ok == 1) {
        ElMessage({
          type: 'success',
          message: '批量删除成功'
        })
      } else {
        ElMessage({
          type: 'error',
          message: '批量删除失败'
        })
      }
      this.getData()
      this.dialogVisibled = false
    },
    async patchshuju() {
      let res = await patchRoomApi(this.checked)
      if (res.ok == 1) {
        ElMessage({
          type: 'success',
          message: '修改成功'
        })
      } else {
        ElMessage({
          type: 'error',
          message: '修改失败'
        })
      }
      this.getData()
      this.checked.length = 0
    },
    sjHandler(number) {
      this.checked.push(number)
      this.shangHandler()
    },
    xjHandler(number) {
      this.checked.push(number)
      this.xiaHandler()
    },
    xiaHandler() {
      this.checked.push(0)
      this.patchshuju()
    },
    shangHandler() {
      this.checked.push(1)
      this.patchshuju()
    },
    addBtnHandler() {
      this.dialogVisible = true;
      this.nowid = 0;
    },
    dialogCancelHandler() {
      this.dialogVisible = false;
    },
    async dialogOKHandler({ roomdata }) {
      if (this.nowid == 0) {
        let res = await addRoomApi(roomdata)
        if (res.ok == 1) {
          ElMessage({
            type: 'success',
            message: '添加成功'
          })
        } else {
          ElMessage({
            type: 'error',
            message: '添加失败'
          })
        }
      } else {
        let res = await putRoomApi(this.nowid, roomdata)
        if (res.ok == 1) {
          ElMessage({
            type: 'success',
            message: '修改成功'
          })
        } else {
          ElMessage({
            type: 'error',
            message: '修改失败'
          })
        }
      }
      this.getData()
      this.dialogVisible = false;
    },
    updataHandler(number) {
      this.dialogVisible = true;
      this.nowid = number;
    }
  },
  watch: {
    number() {
      this.tableDataed = this.tableDataed.filter(item => String(item.number).includes(this.number))
    },
    page() {
      this.getData()
    },
    pagesize() {
      if (this.page != 1) {
        this.page = 1
      } else {
        this.getData()
      }
    }
  }
}
</script>
  
<style lang="scss" scoped>
.box {
  padding: 25px 45px;
}

.mt-4 {
  margin-top: 10px;
  float: right;
}

.el-table {
  margin-top: 35px;
}

.pageleft {
  margin-top: 15px;
  font-size: 14px;
  float: left;
}
</style>